<template>
  <div>
    <a-modal v-model="visible" centered title="查看" :footer="null" width="700px" @cancel="close" :destroyOnClose="true">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="标题">
          <div style="display: flex; width: 100%; justify-content: space-between">
            <div>{{ form.name }}</div>
            <div class="frequency">分享次数：{{ form.shareNum }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="描述">{{ form.content }} </a-form-model-item>
        <a-form-model-item label="图片" v-if="form.backgroundImage">
          <div style="display: flex; flex-wrap: wrap; width: 600px">
            <div v-for="(item, index) in form.backgroundImage" :key="index">
              <img class="imgs" :src="item" alt="" />
            </div>
          </div>

          <!-- <img :src="form.backgroundImage" class="imgs"  /> -->
        </a-form-model-item>
        <a-form-model-item label="视频" v-if="form.videoDetail.videoUrl">
          <video :src="form.videoDetail.videoUrl" controls muted loop class="imgs" :poster="form.videoDetail.coverUrl ? form.videoDetail.coverUrl : ''" v-if="form.videoDetail.videoUrl"></video>
        </a-form-model-item>
        <a-form-model-item label="商品" v-if="!form.productNum == 0">
          <div style="display: flex; flex-wrap: wrap; width: 600px">
            <div class="details-wrapper" v-for="(item, index) in form.themeDetails" :key="index">
              <img class="main-img" :src="item.imgUrl ? item.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" />
              <div class="text">
                <div class="t">款号：{{ item.productNo }}</div>
                <div class="t">品名：{{ item.productName }}</div>
                <div class="t">年份：{{ item.productYear }}</div>
                <div class="t">波段：{{ item.productBand }}</div>
                <div class="t">品牌：{{ item.productBrand }}</div>
                <div class="t">大类：{{ item.bigClass }}</div>
                <div class="t">小类：{{ item.smallClass }}</div>
              </div>
            </div>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { guideDetail } from '@/api/pos/match'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        videoDetail: {
          videoUrl: '',
          coverUrl: ''
        }
      },
      productDetails: {},
      visible: false
    }
  },
  methods: {
    // 关闭弹窗
    close() {
      this.visible = false
    },
    show(id) {
      let data = {
        themeId: id
      }
      guideDetail(data).then(res => {
        if (res.code == 200) {
          this.form = res.data

          if (res.data.videoDetail != undefined) {
            this.form.videoDetail.videoUrl = res.data.videoDetail && res.data.videoDetail.videoUrl ? res.data.videoDetail.videoUrl : ''
          } else {
            this.form.videoDetail = {
              videoUrl: '',
              coverUrl: ''
            }
          }

          this.form.backgroundImage = res.data.backgroundImage ? res.data.backgroundImage.split(',') : ''
        } else {
          this.$message.warning(res.msg)
        }
      })
      this.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
.details-wrapper {
  display: flex;
  padding-bottom: 40px;
  .main-img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }

  .text {
    flex: 1;

    line-height: 25px;
    font-size: 14px;
  }
}
.frequency {
  color: #aaa;
}
.imgs {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-right: 10px;
}

/deep/.ant-modal-body {
  max-height: calc(85vh - 100px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;

    border-radius: 5px;
  }
}
</style>

